<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 包含头部信息用于适应不同设备
     width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
     nitial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
     通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="<?php echo base_url();?>lib/bootstrap-3.3.0/css/bootstrap.min.css">
    <!--状态栏和导航栏的样式-->
    <link rel="stylesheet" href="<?php echo base_url();?>navigation.css">
	<script type="text/javascript" src="<?php echo base_url();?>lib/jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="l<?php echo base_url();?>ib/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>src/item3.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>src/common.js"></script>
    <title>留言板</title>
    <style rel="stylesheet">
        body, div, p, span, img, ul, form {
        margin: 0px;
        padding: 0px;
    }
        body {
            background-color: rgb(239, 239, 239);
    }
        #container, #container div {
        margin: 0px;
        padding: 0px;
    }

    #container #line {
        height: 2px;
        width: 100%;
        background-color: #eeeeee;
    }

    #container #form {
        background-color: #ffffff;
    }
    #div_star #star_list {
        list-style-type: none;
    }

    #div_star #star_list li {
        float: left;
        width: 35px;
        height: 41px;
        padding-left: 13px;
        padding-top: 19px;
    }
    #div_star #star_desc {
        font-weight: bold;
        font-size: 15px;
        width: 75px;
        height: 41px;
        padding-right: 15px;
        padding-top: 19px;
        float: right;
    }
    #container #star_bottom_line {
        margin-left: 14px;
        margin-right: 14px;
        padding-top: 15px;
        background-color: #ffffff;
        border-bottom: 2px solid #eeeeee;
    }
    .clear {
        clear: both;
    }
    #container #div_textarea {
        margin: 21px 13px 0px 13px;
    }
    #container #comment {
        height: 150px;
        width: 100%;
        font-size: 15px;
        /*color: #bbbbbb;*/
        padding-top: 16px;
        padding-left: 14px;
        border: 2px solid #eeeeee;
    }
    #container #div_submit {
        position: relative;
        height: 79px;
    }
    #container #save_comment {
        background-color: #5ac8fa;
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
        width: 86px;
        height: 29px;
        border: none;
        position: absolute;
        right: 23px;
        bottom: 29px;
    }
    #container #comment_list {
        padding-top: 20px;
        margin-bottom: 13px;
    }
    #container #comment_item {
        background-color: #ffffff;
        margin: 13px 14px 0px;
        height: 60px;
        padding: 17px 14px;
        font-weight: bold;
        font-size: 15px;
    }
    </style>
</head>
<body>
    <div class="container-fluid" id="container">
        <div class="row" id="header_row">
        <div class="col-xs-2" id="header_back">
            <?php if ($static) { ?>
            <img src="<?php echo base_url()?>res/images/template1/back_nor.png" alt="返回">
            <?php } ?>
        </div>
        <div class="col-xs-8" id="header_title">留言板</div>
        <div class="col-xs-2"></div>
    </div>
        <div id="line"></div>

        <form id="form">
        <input type="hidden" id="site_id" name="site_id" value="<?php echo $site_id;?>">
        <input type="hidden" id="t_id" name="t_id" value="<?php echo $t_id;?>">
        <input type="hidden" id="color" name="color" value="<?php echo $color;?>">
        <div id="div_star">
            <ul id="star_list">
                <li><img class="img-responsive star" src="<?php echo base_url();?>res/images/template1/star_nor.png"></li>
                <li><img class="img-responsive star" src="<?php echo base_url();?>res/images/template1/star_nor.png"></li>
                <li><img class="img-responsive star" src="<?php echo base_url();?>res/images/template1/star_nor.png"></li>
                <li><img class="img-responsive star" src="<?php echo base_url();?>res/images/template1/star_nor.png"></li>
                <li><img class="img-responsive star" src="<?php echo base_url();?>res/images/template1/star_nor.png"></li>
            </ul>
            <div id="star_desc">星评</div>
        </div>
        <div class="clear" id="star_bottom_line"></div>
        <div id="div_textarea">
            <textarea id="comment" placeholder="填写留言"></textarea>
        </div>
        
        <div id="div_submit">
            <input id="save_comment" type="submit" value="发表">
        </div>
        </form>

        <div id="comment_list">
        </div>
    </div>
    <input type="hidden" name="static" id="static" value="<?php echo $static;?>" />
    <?php if (!$static) { ?>
    <!-- 下一步 -->
    <div class="contaienr-fluid" id="footer_row">
        <div class="row">
            <div class="col-xs-6 text-center" id="nav_back">返回</div>
            <div class="col-xs-6 text-center" id="nav_next">下一步</div>
        </div>
    </div>
    <?php } ?>


<script type="text/javascript">
	function writeObj(obj){ 
	    var description = ""; 
	    for(var i in obj){   
	        var property=obj[i];   
	        description+=i+" = "+property+"\n";  
	    }   
	    alert(description); 
	} 
    function IndexOf(arr,object){
        	for(var i=0;i<arr.length;i++){
                    if(arr[i] == object)
                    return i;
                }
            };
            $(".star").mouseover(function() {
                var num = 0;
                $("#div_star img").each(function() {
                    num++;
                });
                var index = IndexOf($("#div_star .star"), $(this)[0]);

                for(var i = 0; i<=index; i++) {
                    var star_hl = $(".star")[i];
                    star_hl.src = "http://182.92.111.163/baisi/webroot/res/images/template1/star_hl.png";
                }
                for (var j = $("#div_star .star").length ; j > index + 1; j--) {
                    var star_nor = $("#div_star .star")[j-1];
                    star_nor.src = "http://182.92.111.163/baisi/webroot/res/images/template1/star_nor.png";
                }
            });

	</script>
</body>
</html>